<template>
  <view>
    <view class="special-work-list__group">
      <view class="special-work-list__item">
        <text class="special-work-list__label">申请单位：</text>
        <text class="special-work-list__value">{{ ticket.applyUnitName }}</text>
      </view>
      <view class="special-work-list__item">
        <text class="special-work-list__label">申请人：</text>
        <text class="special-work-list__value">{{ ticket.creator }}</text>
      </view>
      <view class="special-work-list__item">
        <text class="special-work-list__label">作业申请时间：</text>
        <text class="special-work-list__value"
          ><uni-dateformat :date="ticket.createTime" format="yyyy-MM-dd hh:mm"></uni-dateformat
        ></text>
      </view>
      <view class="special-work-list__item">
        <text class="special-work-list__label">作业内容：</text>
        <text class="special-work-list__value">{{ ticket.workContent }}</text>
      </view>
      <view class="special-work-list__item">
        <text class="special-work-list__label">作业点：</text>
        <text class="special-work-list__value">{{ ticket.operationPoint }}</text>
      </view>
      <view class="special-work-list__item">
        <text class="special-work-list__label">作业区域：</text>
        <text class="special-work-list__value">{{ ticket.areaName }}</text>
      </view>
      <component
        :is="comp"
        :detail="detail"
        :ticket="ticket"
        :inspect="inspect"
        :actual-date-label="actualDateLabel"
      ></component>
      <view v-if="ticket.fenceImgUrl" class="special-work-list__item flex-col">
        <view class="special-work-list__label">电子围栏：</view>
        <view>
          <image
            :src="`${staticUrl}${ticket.fenceImgUrl}`"
            mode="aspectFill"
            @click="handlePreviewImage(`${staticUrl}${ticket.fenceImgUrl}`)"
            style="width: 100%; height: 300rpx"
          ></image>
        </view>
      </view>
      <view class="special-work-list__item">
        <text class="special-work-list__label">风险辨识结果：</text>
        <text class="special-work-list__value">{{ ticket.riskIdentificationResultLabel }}</text>
      </view>
      <view class="special-work-list__item" :class="{ 'flex-col': ticket.relateTickets.length }">
        <view class="special-work-list__label">关联作业票类型</view>

        <view v-if="ticket.relateTickets.length" class="flex-table mb-20">
          <view v-for="(item, index) in ticket.relateTickets" :key="index" class="flex-table__tr">
            <view class="flex-table__td" style="width: 250rpx">
              <text v-if="item.blandPlateType">{{ item.blandPlateType }}</text>
              <text v-else>{{ item.workTypeLabel }}</text>
            </view>
            <view class="flex-table__td flex-auto">
              {{ item.ticketCode }}
              <text v-if="item.blandPlateType">(抽堵关联)</text>
            </view>
          </view>
        </view>

        <text v-else class="special-work-list__value">：暂无关联的作业票</text>
      </view>
    </view>

    <view class="special-work-list__group">
      <view class="special-work-list__item" :class="{ 'flex-col': ticket.applicantSignatureUrl }">
        <text class="special-work-list__label">申请人：</text>
        <view class="flex flex-wrap" v-if="ticket.applicantSignatureUrl">
          <view class="flex" v-for="(imgItem, imgIndex) in ticket.applicantSignatureUrl.split(',')" :key="imgIndex">
            <image
              :src="`${staticUrl}${imgItem}`"
              mode="aspectFill"
              class="special-work__img"
              @click="handlePreviewImage(`${staticUrl}${imgItem}`)"
            ></image>
          </view>
        </view>
        <text v-else class="special-work-list__value">{{ ticket.creator }}</text>
      </view>

      <view class="special-work-list__item">
        <text class="special-work-list__label">申请时间：</text>
        <text class="special-work-list__value"
          ><uni-dateformat v-if="ticket.createTime" :date="ticket.createTime" format="yyyy-MM-dd hh:mm"></uni-dateformat
        ></text>
      </view>
    </view>
  </view>
</template>

<script>
import FireTicketInfo from './FireTicketInfo.vue'
import LimitSpaceTicketInfo from './LimitSpaceTicketInfo.vue'
import BlindPlateTicketInfo from './BlindPlateTicketInfo.vue'
import HighTicketInfo from './HighTicketInfo.vue'
import LiftingTicketInfo from './LiftingTicketInfo.vue'
import ElectricTicketInfo from './ElectricTicketInfo.vue'
import BreakGroundTicketInfo from './BreakGroundTicketInfo.vue'
import MaintenanceTicketInfo from './MaintenanceTicketInfo.vue'
import BreakerTicketInfo from './BreakerTicketInfo.vue'
import { staticUrl } from '@/config.js'
import { specialWorkTypeEnum } from '@/utils/constant.js'
import dayjs from 'dayjs'
export default {
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    ticket: {
      type: Object,
      default: () => ({})
    },
    inspect: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    FireTicketInfo,
    LimitSpaceTicketInfo,
    BlindPlateTicketInfo,
    HighTicketInfo,
    LiftingTicketInfo,
    ElectricTicketInfo,
    BreakGroundTicketInfo,
    BreakerTicketInfo,
    MaintenanceTicketInfo
  },
  computed: {
    // 协调人信息
    coordinatorInfo() {
      if (!this.inspect || !this.inspect[6]) {
        return {}
      }
      for (let i = 0; i < this.inspect[6].length; i++) {
        if (this.inspect[6][i].ticketNodeName.substring(0, 5) === '审批：协调') {
          return this.inspect[6][i]
        }
      }
      return {}
    },
    // 作业实施时间
    actualDateLabel() {
      if (!this.ticket || !this.ticket.actualStartTime) {
        return '作业未开始'
      }
      const start = dayjs(this.ticket.actualStartTime).format('YYYY-MM-DD HH:mm')
      if (!this.ticket.actualEndTime) {
        return `自${start}至未结束`
      }
      const end = dayjs(this.ticket.actualEndTime).format('YYYY-MM-DD HH:mm')
      return `自${start}至${end}`
    },
    comp() {
      switch (this.ticket?.workTypeFlag) {
        case specialWorkTypeEnum.FIRE:
          return 'FireTicketInfo'
        case specialWorkTypeEnum.LIMIT_SPACE:
          return 'LimitSpaceTicketInfo'
        case specialWorkTypeEnum.BLIND_PLATE:
          return 'BlindPlateTicketInfo'
        case specialWorkTypeEnum.HIGH:
          return 'HighTicketInfo'
        case specialWorkTypeEnum.LIFTING:
          return 'LiftingTicketInfo'
        case specialWorkTypeEnum.ELECTRIC:
          return 'ElectricTicketInfo'
        case specialWorkTypeEnum.BREAK_GROUND:
          return 'BreakGroundTicketInfo'
        case specialWorkTypeEnum.BREAKER:
          return 'BreakerTicketInfo'
        case specialWorkTypeEnum.MAINTENANCE:
          return 'MaintenanceTicketInfo'
        default:
          return null
      }
    }
  },
  data() {
    return {
      staticUrl
    }
  },
  methods: {
    handlePreviewImage(url) {
      uni.previewImage({
        urls: [url]
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '../style/style.scss';
</style>
